// 引入懒加载插件
import {useIntersectionObserver} from "@vueuse/core"

export const directivePlugin = {
	install(app) {
		// 	懒加载指令逻辑
		app.directive('img-lazy', {
			mounted(el, binding) {
				// 	el:指令绑定的那个元素img
				// 	binding:binding.value 指令等于号后面绑定的表达式的值 图片url
				const {stop} = useIntersectionObserver(
					el,
					([{isIntersecting}]) => {
						if (isIntersecting) {
							// 	进入视口区域
							el.src = binding.value;
							// 加载完毕后停止
							stop();
						}
					}
				)
			}
		})
	}
}
